
<%@ page contentType="text/html;charset=UTF-8"  %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>书籍列表</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</head>
<style>
    body {
        background: #fafafa;
    }

    .user_info{
        overflow: hidden;

    }
    .user_info button{
        float: right;
        margin-top: 20px;
        margin-right: 100px;
    }
</style>
<body>

    <div class="user_info">

        <button type="button" class="btn btn-primary" title="选项"
                data-html="true"
                data-container="body" data-toggle="popover" data-placement="bottom"
                data-content="<button class='btn btn-default' id='quit'>退出</button>">
            <c:out value="${sessionScope.user_info.name}"></c:out>
        </button>
    </div>

<div class="container">
    <table class="table table-hover">
        <caption>书籍列表</caption>
        <thead>
        <tr>
            <th>书名</th>
            <th>作者名</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${bookList}" var="item">

            <tr>
                <td><c:out value="${item.name}"/></td>
                <td>  <c:out value="${item.author.chName}"/></td>
                <td>  <c:out value="${item.price}"/></td>

            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

</body>
</html>
<script>
    //触发用户弹框操作

    $("[data-toggle='popover']").popover();
    //退出操作
    $(document).on("click","#quit",function(){
        $.post("/user/quit",function (res) {
            if(res.error===false){
                alert("退出成功！");
                location.href="${pageContext.request.contextPath}"+"/user/login";
            }
        },'json');
    });
</script>
